<template>
    <div>
        <div style="padding: 10px;">
            <div style="float: left; width:60%">
                <br>
                <el-form ref="form" :model="addForm">
                    <el-row>
                        <el-col :span="4">文本信息：</el-col>
                        <el-col :span="20">
                            <div style="height: 150px; width: 90%; border: 1px solid #d7d7d7; border-radius: 8px;">
                                <div style="border-bottom: 1px solid #d7d7d7; padding: 6px; color: rgb(250,140,21)" @click="addForm.welcomeMessage += '#客户名称#'">
                                    [插入客户名称]
                                </div>
                                <el-input type="textarea" :rows="5" placeholder="请输入内容"
                                          v-model="addForm.welcomeMessage">
                                </el-input>
                            </div>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="4">其他信息：</el-col>
                        <el-col :span="20">
                            <div style="width: 90%">
                                <el-card>
                                    <div>
                                        选择消息类型：
                                        <el-radio v-model="addForm.messageType" label="1" @change="saveTypeUp(1)">图片
                                        </el-radio>
                                        <el-radio v-model="addForm.messageType" label="2" @change="saveTypeUp(2)">链接
                                        </el-radio>
                                        <el-radio v-model="addForm.messageType" label="3" @change="saveTypeUp(3)">小程序
                                        </el-radio>
                                    </div>
                                    <!-- 图片 -->
                                    <div v-if="messageType == 1" style="padding: 10px;">
                                        <el-upload
                                                :action="$uri + '/api/file/upload'"
                                                :data="{type:'2'}"
                                                ref="uploadAddImg"
                                                list-type="picture-card"
                                                :on-remove="handleRemove"
                                                :on-success="handleAvatarSuccess"
                                                :on-change="handleAvatarChangeImg"
                                                :auto-upload="false" style="width: 80%;">
                                            <img v-if="addForm.welcomeAppendices" :src="addForm.welcomeAppendices" class="avatar">
                                        </el-upload>
                                        支持JPG,PNG格式，大小不超过2M
                                    </div>
                                    <!-- 链接 -->
                                    <div v-if="messageType == 2" style="padding: 10px;">
                                        <el-input placeholder="请输入链接地址" v-model="addForm.name">
                                            <template slot="prepend">Http://</template>
                                        </el-input>

                                        <div>
                                            高级设置：
                                            <el-switch
                                                    v-model="value"
                                                    active-color="#13ce66"
                                                    inactive-color="#ff4949">
                                            </el-switch>
                                            开启后可自定义标题、摘要和封面图
                                        </div>

                                        <div v-if="value">
                                            <el-row>
                                                <el-col :span="4">链接标题</el-col>
                                                <el-col :span="20">
                                                    <el-input
                                                            type="text"
                                                            placeholder="请输入链接标题"
                                                            v-model="textTitle"
                                                            maxlength="50"
                                                            show-word-limit>
                                                    </el-input>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="4">链接摘要</el-col>
                                                <el-col :span="20">
                                                    <el-input
                                                            type="text"
                                                            placeholder="请输入链接摘要"
                                                            v-model="textMessage"
                                                            maxlength="50"
                                                            show-word-limit>
                                                    </el-input>
                                                </el-col>
                                            </el-row>
                                            <el-row>
                                                <el-col :span="4">链接封面</el-col>
                                                <el-col :span="20">
                                                    <el-upload
                                                            :action="$uri + '/api/file/upload'"
                                                            :data="{type:'2'}"
                                                            ref="uploadAddImg"
                                                            list-type="picture-card"
                                                            :on-remove="handleRemove"
                                                            :on-success="handleAvatarSuccess"
                                                            :on-change="handleAvatarChangeImg"
                                                            :auto-upload="false" style="width: 80%;">
                                                        <i class="el-icon-plus"></i>
                                                    </el-upload>
                                                </el-col>
                                            </el-row>
                                        </div>
                                    </div>
                                    <!-- 小程序 -->
                                    <div v-if="messageType == 3" style="padding: 10px;">
                                        <div
                                                style="background: rgb(230,247,255); border: 1px solid rgb(145,213,255); padding: 5px;">
                                            只有在企业微信后台绑定的小程序才可在此添加哦。
                                        </div>

                                        <div class="xcx" @click="xcx = true">
                                            <i class="el-icon-circle-plus-outline"></i>
                                            <div>添加小程序</div>
                                        </div>
                                    </div>
                                </el-card>
                            </div>
                        </el-col>
                    </el-row>
                </el-form>
                <br>
                <div slot="footer" class="dialog-footer" style="text-align: center;">
                    <el-button @click="back()">取消</el-button>
                    <el-button type="primary" @click="create()">新建入群欢迎语</el-button>
                </div>
            </div>
            <div class="right" style="float: left;">
                <iframe src="http://wx.zzxapps.com/pages/chat/HM-chat" frameborder="0"
                        style="width: 300px;height: 560px;"></iframe>
            </div>
        </div>


        <!-- 添加小程序 -->
        <el-dialog title="添加小程序" :visible.sync="xcx" width="35%">
            <div
                    style="background: rgb(230,247,255); border: 1px solid rgb(145,213,255); padding: 5px 10px; margin-bottom: 15px;">
                请填写企业微信后台绑定的小程序 id 和路径，否则会造成发送失败
            </div>
            <el-form ref="form" :model="forms" label-width="120px">
                <el-form-item label="小程序标题">
                    <el-input v-model="forms.title"></el-input>
                </el-form-item>
                <el-form-item label="小程序appid">
                    <el-input v-model="forms.id"></el-input>
                </el-form-item>
                <el-form-item label="小程序路径">
                    <el-input v-model="forms.url"></el-input>
                </el-form-item>
                <el-form-item label="小程序封面">
                    <el-upload
                            action=""
                            list-type="picture-card">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
                <el-button @click="close">返回</el-button>
                <el-button type="primary" @click="submit">确定</el-button>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 表单数据
            addForm: {
                name: '',
                type: '1',
                status: true
            },
            // 展示
            value: false,
            // 图片上传
            imageUrl: '',

            // 新建页选项卡
            messageType: '1',

            // 添加小程序页面
            xcx: false,
            // 添加小程序表单
            forms: {
                title: '',
                id: '',
                url: '',
                img: '',
            }
        }
    },
    methods: {
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },

        // 返回
        back() {
            this.$emit("currentHandler", "list")
        },
        // 确定并返回
        create() {
            this.addForm.welcomeType = '2'
            if(this.addForm.status == true){
                this.addForm.welcomeAlert = 'true'
            }else{
                this.addForm.welcomeAlert = 'false'
            }
            this.$request("/api/welcome/addWelcome/1_0", this.addForm, "POST").then((data) => {
                if (data.data == 1) {
                    this.$message({
                        message: "操作成功 ！",
                        type: 'success'
                    });
                }
            })
            this.back()
        },

        // 选项卡
        saveTypeUp(i) {
            this.messageType = i;
        },
        // 关闭
        close() {
            this.xcx = false;
        },
        // 确定
        submit() {
            this.xcx = false;
            this.$message({
                type: 'success',
                message: '已添加!'
            })
        },

        handleRemove(file) {
            console.log(file);
        },

        handleAvatarSuccess(res, file) {
            this.addForm.welcomeAppendices = this.$uri + res.paths[0];
        },

        handleAvatarChangeImg(file){
            if (this.beforeAvatarUpload(file.raw)){
                this.addForm.welcomeAppendices = URL.createObjectURL(file.raw);
                this.addForm.type = 2;
            }
        },
    },
}
</script>

<style scoped>
.el-row {
    margin: 10px 0;
}

/*文件域样式开始*/
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

/*文件域样式结束*/

/* 添加小程序 */
.xcx {
    height: 100px;
    width: 100px;
    background: rgb(251, 251, 251);
    border: 1px dashed #d7d7d7;
    border-radius: 8px;
    margin-top: 10px;
    color: #aaa;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 30px 0;
    box-sizing: border-box;
}
</style>
